<%@ include file="/WEB-INF/jsp/include.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jQuery UI Autocomplete</title>
		<link rel="stylesheet" type="text/css" href="<c:url value="/css/ui-lightness/jquery-ui-1.8.custom.css"/>">
		<link rel="stylesheet" type="text/css" href="<c:url value="/css/autocomplete.css"/>">
	</head>
	<body>
		<div id="formWrap">
			<form id="messageForm" action="#">
				<fieldset>
					<legend>New message form</legend>
					<span>New Message</span>
					<label id="toLabel">To:</label>
					<div id="friends" class="ui-helper-clearfix">
						<input id="to" type="text">
					</div>
					<label>Subject:</label>
					<input id="subject" name="subject" type="text">
					<label>Message:</label>
					<textarea id="message" name="message" rows="5" cols="50"></textarea>
					<button type="button" id="cancel">Cancel</button>
					<button type="submit" id="send">Send</button>
				</fieldset>
			</form>
		</div>
		<script type="text/javascript" src="<c:url value="/scripts/jquery-1.4.2.min.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/scripts/jquery-ui-1.8.custom.min.js"/>"></script>
		<script type="text/javascript">
			$(function(){
				
				//attach autocomplete
				$("#to").autocomplete({
					
					//define callback to format results
					source: function(req, add){
					
						//pass request to server
						$.getJSON("<c:url value="/suggest/test3.htm"/>", req, function(data) {
							
							//create array for response objects
							var suggestions = [];
							
							//process response
							$.each(data, function(i, val){								
								suggestions.push(val.name);
							});
							
							//pass array to callback
							add(suggestions);
						});
					},
					
					//define select handler
					select: function(e, ui) {
						
						//create formatted friend
						var friend = ui.item.value,
							span = $("<span>").text(friend),
							a = $("<a>").addClass("remove").attr({
								href: "javascript:",
								title: "Remove " + friend
							}).text("x").appendTo(span);
						
						//add friend to friend div
						span.insertBefore("#to");
					},
					
					//define select handler
					change: function() {
						
						//prevent 'to' field being updated and correct position
						$("#to").val("").css("top", 2);
					}
				});
				
				//add click handler to friends div
				$("#friends").click(function(){
					
					//focus 'to' field
					$("#to").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("friends")).live("click", function(){
				
					//remove current friend
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#friends span").length === 0) {
						$("#to").css("top", 0);
					}				
				});				
			});
		</script>
	</body>
</html>